<template>
	<view class="flex">
		<!-- // #ifndef APP-NVUE
		width: 100%;
		// #endif
		// #ifdef APP-NVUE
		width: 290rpx;
		// #endif -->
		<!--  #ifdef APP-NVUE -->
		<scroll-view :show-scrollbar="false" scroll-y class="TUI-Emoji" :class="{'TUI-Emoji-show':show == 'emoji'}">
		<!--  #endif -->
			<!-- #ifndef APP-NVUE -->
			<scroll-view :show-scrollbar="false" scroll-y>
				<view class="TUI-Emoji" :class="{'TUI-Emoji-show':show == 'emoji'}">
				<!--  #endif -->

					<view v-for="(item, index) in emojiList" :key="index" class="TUI-emoji-image">
						<text :data-name="item.url" class="emoji-image" @tap="handleEnterEmoji">{{item.url}}</text>
						<!-- <image :data-name="item.emojiName" class="emoji-image" :src="item.url" @tap="handleEnterEmoji">
						</image> -->
					</view>
				<!-- #ifndef APP-NVUE -->
				</view>
				<!--  #endif -->
			</scroll-view>
	</view>
</template>

<script>
	import {
		emojiName,
		emojiUrl,
		emojiMap
	} from '@/utils/emojiMap';

	export default {
		data() {
			return {
				emojiList: []
			}
		},
		props: {
			show: {
				type: [String, Number],
				default: ''
			},
		},
		mounted() {
			for (let i = 0; i < emojiName.length; i++) {
				this.emojiList.push({
					emojiName: emojiName[i],
					url: emojiMap[emojiName[i]]
				})
			}
		},
		methods: {
			handleEnterEmoji(event) {
				this.$emit('enterEmoji', {
					detail: {
						message: event.currentTarget.dataset.name
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.flex {
		flex: 1
	}

	.TUI-Emoji {
		@include flex(row);
		justify-content: flex-start;
		flex-wrap: wrap;
		height: 0;
		transition: height 300ms ease-out 0ms, -webkit-transform 300ms ease-out 0ms, transform 300ms ease-out 0ms;
		transform-origin: 50% 50%;

		&.TUI-Emoji-show {
			padding: 20rpx 20rpx 0;
			height: 480rpx;
		}
	}

	.TUI-emoji-image {
		width: 68.5rpx;
		height: 68.5rpx;
		margin: 10rpx;
	}

	.emoji-image {
		width: 68.5rpx;
		height: 68.5rpx;
		font-size: 50rpx;
		text-align: center;
	}
</style>